<template>
    <div class="editor-container">
        <QuillEditor :content="formData.content" contentType="html" theme="snow" :options="editorOptions" />
    </div>
</template>
<script setup>
import { ref, reactive, watchEffect, onMounted } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const props = defineProps({
    initialData: {
        type: Object,
        default: () => ({
            content: '',
        })
    },
    loading: {
        type: Boolean,
        default: false
    }
})
// 表单数据
const formData = reactive({
    content: '',
})

// 编辑器配置
const editorOptions = {
  debug: 'info',
  modules: {
    toolbar: [
      [{ size: [false, "small", "large", "huge"] }],            // 字号
      [{ header: [false, 1, 2, 3, 4, 5, 6] }],                  // 标题
      [{ color: [] }, { background: [] }],                      // 字体颜色、文本突出显示颜色
      ["bold", "italic", "underline", "strike"],                // 加粗、倾斜、下划线、删除线
      ["blockquote"],                                           // 块引用
      [{ script: "sub" }, { script: "super" }],                 // 下标、上标
      [{ list: "ordered" }, { list: "bullet" }],                // 有序、无序列表
      [{ indent: "-1" }, { indent: "+1" }],                     // 减少缩进量、增加缩进量
      [{ align: [] }],                                          // 对齐、左对齐、居中、右对齐、两端对齐
      ["link", "image", "video"],                       // 链接、图片、视频
      ["clean"],                                                // 清除样式
    ]
  },
  placeholder: '请输入内容~'
}
// 初始化数据
onMounted(() => {
    Object.assign(formData, props.initialData)
    loadDraft()
})

// 自动保存草稿
watchEffect(() => {
    const draft = {
        content: formData.content,
    }
    localStorage.setItem('articleDraft', JSON.stringify(draft))
})

// 加载草稿
const loadDraft = () => {
    const draft = localStorage.getItem('articleDraft')
    if (draft) {
        try {
            const parsedDraft = JSON.parse(draft)
            Object.assign(formData, parsedDraft)
        } catch (e) {
            console.error('加载草稿失败:', e)
        }
    }
}
</script>

<style lang="scss" scoped>
.editor-container {
  height: 600px;
  width: 120%;
  margin-bottom: 60px;
}

.editor-container {
  ::v-deep {
    .ql-editor {
      min-height: 600px;
      max-height: 1000px;
    }

    .ql-snow.ql-toolbar {
      .ql-picker.ql-header {
        width: 70px;

        .ql-picker-label::before,
        .ql-picker-item::before {
          content: '普通';
        }

        .ql-picker-label[data-value='1']::before,
        .ql-picker-item[data-value='1']::before {
          content: '标题一';
        }

        .ql-picker-label[data-value='2']::before,
        .ql-picker-item[data-value='2']::before {
          content: '标题二';
        }

        .ql-picker-label[data-value='3']::before,
        .ql-picker-item[data-value='3']::before {
          content: '标题三';
        }

        .ql-picker-label[data-value='4']::before,
        .ql-picker-item[data-value='4']::before {
          content: '标题四';
        }

        .ql-picker-label[data-value='5']::before,
        .ql-picker-item[data-value='5']::before {
          content: '标题五';
        }

        .ql-picker-label[data-value='6']::before,
        .ql-picker-item[data-value='6']::before {
          content: '标题六';
        }
      }

      .ql-picker.ql-size {
        width: 70px;

        .ql-picker-label::before,
        .ql-picker-item::before {
          content: '普通';
        }

        .ql-picker-label[data-value='small']::before,
        .ql-picker-item[data-value='small']::before {
          content: '小';
        }

        .ql-picker-label[data-value='large']::before,
        .ql-picker-item[data-value='large']::before {
          content: '中';
        }

        .ql-picker-label[data-value='huge']::before,
        .ql-picker-item[data-value='huge']::before {
          content: '大';
        }
      }
    }

    .ql-snow .ql-tooltip::before {
      content: '链接';
    }

    .ql-snow .ql-tooltip a.ql-action::after {
      content: '编辑';
    }

    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      content: '保存';
    }

    .ql-snow .ql-tooltip a.ql-remove::before {
      content: '移除';
    }
  }
}
</style>